<script setup>
import { defineModel, ref } from 'vue';

//查询的字段传参
const column = defineProps({
    // 查询的字段标签
    label: {
        type: String,
        default: '表头'
    },
    //查询的字段值
    field: {
        type: String,
        default: 'name'
    },
    queryAble: {
        type: Boolean,
        default: false
    }
});
const queryModel = defineModel();
const popoverRef = ref(null);
const showQueryPopover = (event) => {
    popoverRef.value.show(event);
};
</script>
<template>
    <!-- 标题名称 -->
    <div v-if="column.queryAble" @click="showQueryPopover" class="flex flex-row items-stretch italic font-mono text-center font-black hover:text-primary self-center cursor-pointer" :class="{ 'text-primary': queryModel }">
        <div v-tooltip.bottom="'点击进行筛选'">{{ column.label }}</div>
        <div class="self-center ml-2">
            <i v-if="!queryModel" class="pi pi-search" style="font-size: 0.75rem" v-tooltip.bottom="'点击进行筛选'" />
            <!-- 关闭查询icon -->
            <i v-else class="pi pi-times" style="font-size: 0.75rem" @click="queryModel = undefined" v-tooltip.bottom="'清空筛选'" />
        </div>
    </div>

    <div v-else class="italic font-mono text-center font-black select-none">{{ column.label }}</div>

    <!-- 查询窗口 -->
    <Popover ref="popoverRef">
        <InputText type="text" ref="queryTextInputRefs" autofocus fluid placeholder="请输入姓名" aria-describedby="username-help" v-model="queryModel" />
        <Message class="ml-4 select-none" size="small" severity="secondary" variant="simple">按回车键开始筛选</Message>
    </Popover>
</template>
